import Vue from 'vue'

export default class BaseCell extends PIXI.Container {
  _cellItem = null
  _cellImage = ''
  constructor(_cellImage) {
    super()
    this.interactive = true

    var bunny = PIXI.Sprite.fromImage(_cellImage)
    bunny.anchor.set(0.5)
    // bunny.x = app.renderer.width / 2;
    // bunny.y = app.renderer.height / 2;    
    bunny.interactive = true
    bunny.buttonMode = true
    bunny.on('pointerdown', onDragStart)
    .on("click", showHandles)
    this.addChild(bunny)

    var text = new PIXI.Text("你好", {
      fontFamily: 'Arial',
      fontSize: 16,
      fill: 0xffffff,
      align: 'center'
    });
    this.addChild(text)
    text.anchor.set(0.5);
    text.y = 70;

    var btnAdd = PIXI.Sprite.fromImage('/static/btn-add.png')
    btnAdd.interactive = true
    btnAdd.anchor.set(0.5)
    btnAdd.x = 90
    this.addChild(btnAdd)
    btnAdd.on('pointerup', () => {
      Vue.bus.emit('addCellLink', this)
    })

    var btnGrounp = new PIXI.Container();
    this.addChild(btnGrounp);
    btnGrounp.y = -70;
    btnGrounp.visible = false;

    var addBtn = new PIXI.Text("添加", {
      fontSize: 16,
      fill: 0xffffff,
      align: "center"
    });
    addBtn.interactive = true;
    addBtn.buttonMode = true;
    addBtn.anchor.set(0.5);
    addBtn.x = -50;

    var editBtn = new PIXI.Text("修改", {
      fontSize: 16,
      fill: 0xffffff,
      align: "center"
    });
    editBtn.interactive = true;
    editBtn.buttonMode = true;
    editBtn.anchor.set(0.5);

    var deleteBtn = new PIXI.Text("删除", {
      fontSize: 16,
      fill: 0xffffff,
      align: "center"
    });
    deleteBtn.interactive = true;
    deleteBtn.buttonMode = true;
    deleteBtn.anchor.set(0.5);
    deleteBtn.x = 50;

    btnGrounp.addChild(addBtn);
    btnGrounp.addChild(editBtn);
    btnGrounp.addChild(deleteBtn);

    function onDragStart(event) {
      // store a reference to the data
      // the reason for this is because of multitouch
      // we want to track the movement of this particular touch
      this.parent
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);
      this.parent.data = event.data;
      this.parent.alpha = 0.5;
      this.parent.dragging = true;
    }

    function onDragEnd() {
      this.alpha = 1;
      this.dragging = false;
      // set the interaction data to null
      this.data = null;
    }

    function onDragMove() {
      if (this.dragging) {
        var newPosition = this.data.getLocalPosition(this.parent);
        this.x = newPosition.x;
        this.y = newPosition.y;
      }
    }

    var self = this
    function showHandles() {
      var bunnys = self.parent.children
      for(var i = 0; i < bunnys.length; i++){
        if(bunnys[i].index == this.parent.index){
          if(bunnys[i].children[3].visible == false){
            bunnys[i].children[3].visible = true
          }else {
            bunnys[i].children[3].visible = false
          }
        }else {
          bunnys[i].children[3].visible = false
        }
      }
    }
  }
}
